---
title: Divider
package: "@chakra-ui/layout"
image: "components/divider.svg"
description: Dividers are used to visually separate content in a list or group.
---

Dividers are used to visually separate content in a list or group.

<ComponentLinks
  theme={{ componentName: "divider" }}
  github={{ package: "divider" }}
  npm={{ package: "@chakra-ui/layout" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Divider } from "@chakra-ui/react"
```

## Usage

The `Divider` displays a thin horizontal or vertical line, and renders a `hr`
tag.

```jsx
<Divider />
```

### Divider Orientation

Pass the `orientation` prop and set it to either `horizontal` or `vertical`.

```jsx
<Divider orientation="horizontal" />
```

If the vertical orientation is used, make sure that the parent element is
assigned a height.

```jsx
<Center height="50px">
  <Divider orientation="vertical" />
</Center>
```

## Composition

```jsx
<Stack direction="row" h="100px" p={4}>
  <Divider orientation="vertical" />
  <Text>Chakra UI</Text>
</Stack>
```

## Props

<PropsTable of="Divider" />
